﻿@model BetterTaskList.Models.ChangePasswordModel
@{
    ViewBag.Title = "Change Password";
}
<h3>
    <span><span>Change your password</span></span>
</h3>
<p>
    New passwords are required to be a minimum of @ViewBag.PasswordLength characters in length.
</p>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
    
    <div>
        <div style="float: left; width: 282px; padding-right: 22px;">
            <div class="editor-label">
                @Html.LabelFor(m => m.OldPassword)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.OldPassword, new { @Style = "width:282px; height:26px;" })
                @Html.ValidationMessageFor(m => m.OldPassword)
            </div>
        </div>
        <div style="float: left; width: 282px; padding-right: 22px;">
            <div class="editor-label">
                @Html.LabelFor(m => m.NewPassword)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.NewPassword, new { @Style = "width:282px; height:26px;" })
                @Html.ValidationMessageFor(m => m.NewPassword)
            </div>
        </div>
        <div style="float: left; width: 282px; padding-right: 6px;">
            <div class="editor-label">
                @Html.LabelFor(m => m.ConfirmPassword)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.ConfirmPassword, new { @Style = "width:282px; height:26px;" })
                @Html.ValidationMessageFor(m => m.ConfirmPassword)
            </div>
        </div>


        <div class="clear"></div>

        <div> 
            @Html.ValidationSummary(true, "Password change was unsuccessful. Please correct the errors and try again.")
        </div>
        
        <div style="text-align: right; padding-top: 13px; padding-left: 4px;">
            <input type="submit" id="ChangePassword" value="Change" />
        </div>
    </div>
    


}

<script type="text/javascript">
    $(function () {
        $("#ChangePassword").button();
    });
</script>